<template>
  <div class="grid grid-cols-4 w-full gap-4 h-[104px]">
    <a-card :bordered="false">
      <div class="flex items-center gap-6 overflow-hidden">
        <div
          :class="`${baseCircleClass} ${
            isDarkMode ? 'bg-primary-light-1' : 'bg-primary-1'
          } text-primary-5`"
        >
          <guat-icon icon="ph:users-fill" :size="48" />
        </div>
        <div class="flex flex-col flex-1 gap-1">
          <div class="text-base text-tc-3 text-nowrap text-ellipsis">成员数量</div>
          <div class="text-xl font-bold">72</div>
        </div>
      </div>
    </a-card>
    <a-card :bordered="false">
      <div class="flex items-center gap-6 overflow-hidden">
        <div
          :class="`${baseCircleClass} ${
            isDarkMode ? 'bg-warning-light-1' : 'bg-warning-1'
          } text-warning`"
        >
          <guat-icon icon="ph:alien-fill" :size="48" />
        </div>
        <div class="flex flex-col flex-1 gap-1">
          <div class="text-base text-tc-3 text-nowrap text-ellipsis">今日值日生</div>
          <div class="text-xl font-bold">用户名</div>
        </div>
      </div>
    </a-card>
    <a-card :bordered="false">
      <div class="flex items-center gap-6 overflow-hidden">
        <div
          :class="`${baseCircleClass} ${
            isDarkMode ? 'bg-success-light-2' : 'bg-success-1'
          } text-success`"
        >
          <guat-icon icon="ph:user-check-fill" :size="48" />
        </div>
        <div class="flex flex-col flex-1 gap-1">
          <div class="text-base text-tc-3 text-nowrap text-ellipsis">今日签到人数</div>
          <div class="text-xl font-bold">暂未开始</div>
        </div>
      </div>
    </a-card>

    <a-card :bordered="false">
      <div class="flex items-center gap-6 overflow-hidden">
        <div
          :class="`${baseCircleClass} ${
            isDarkMode ? 'bg-danger-light-1' : 'bg-danger-1'
          } text-danger`"
        >
          <guat-icon icon="ph:person-simple-run-bold" :size="48" />
        </div>
        <div class="flex flex-col flex-1 gap-1">
          <div class="text-base text-tc-3 text-nowrap text-ellipsis">今日缺勤人数</div>
          <div class="text-xl font-bold">20 人</div>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script setup lang="ts">
const { isDarkMode } = useTheme();
const baseCircleClass = "flex items-center justify-center w-18 h-18 rounded-full";
</script>

<style scoped></style>
